<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title>RedChat</title>
	<link rel="icon" href="../img/chat/redchat.png" sizes="120x120">
	<script src="../peerjs.min.js"></script>
	<script src="../jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css">
	<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
</head>

<body>
	<div class="ui container">
		<div class="ui wrapping menu">
			<a class="item">
				<img src="../img/index/redduck.png" class="ui image" style="width: 20px; height: 20px">
				RedDuck
			</a>
			<a class="item" href="server.html" target="_blank">
				Client Mode
			</a>
			<div class="item">
				<div class="ui icon input">
					<input type="text" placeholder="Username" id="username">
					<i class="user icon"></i>
				</div>
			</div>
			<div class="item">
				<div class="ui icon input">
					<input type="text" placeholder="Server ID" id="serverId">
					<i class="server icon"></i>
				</div>
			</div>
			<div class="item">
				<div class="ui red right labeled icon button" id="connect">
					<i class="wifi icon"></i>
					<span>Connect</span>
				</div>
			</div>
			<div class="item">
				<div class="ui right labeled icon button" id="close">
					<i class="times icon"></i>
					<span>Close</span>
				</div>
			</div>
		</div>
		<div class="ui segment container">
			<div class="ui feed" style="height: 500px;overflow: scroll;" id="messages">
			</div>
			<div class="ui fluid action input">
				<input placeholder="Type your message here..." id="message"></input>
				<div class="ui red right labeled icon button" id="send">
					<i class="send icon"></i>
					<span>Send</span>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="../ui.js"></script>
<script src="addmessage.js"></script>
<script src="../client.js"></script>
<script src="chatClient.js"></script>